import React, {CSSProperties, useEffect, useMemo, useRef} from 'react';
import {Image} from 'antd';
import {CommonComponentProps} from "../../../components/editor/interface.ts";
import {useMateRailDrop} from "../../hooks/useMaterialDrop.ts";
import {useDrag} from "react-dnd";

export interface CarouselProps extends CommonComponentProps {
    id: number;
    name: string;
    parentId?: number;
    styles?: CSSProperties;
    children?: any;
    autoplay:boolean
    text:string
}

const CarouselDev = ({id, styles, name, children}: CarouselProps) => {

    const divRef = useRef<HTMLDivElement>(null);

    const {canDrop, drop} = useMateRailDrop(['CarouselItem'], id)
    const [_, drag] = useDrag({
        type: "CarouselD",
        item: {
            type: name,
            dragType: 'move',
            id: id
        }
    });

    useEffect(() => {
        if (divRef.current) {
            drag(divRef)
            drop(divRef)
        }
    }, []);

    const imgList = useMemo(() => {
        return React.Children.map(children, (item: any) => {
            return <div><Image
                data-component-id={item.props?.id}
                width={100}
                height={100}
                preview={false}
                src={item.props.url}
                style={{zIndex: 9999}}
            /></div>
        })
    }, [children])
    return (
        <div data-component-id={id} style={styles}
             className={`w-[100%] min-h-[100px] ${canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000]'} flex flex-wrap `}
             ref={divRef}
        >
            {/*<Carousel arrows infinite={false} style={{height:"100%"}}>*/}
            {imgList}
            {/*</Carousel>*/}


        </div>
    );
}

export default CarouselDev;